<extend name="Public/base"/>
<block name="body">
    <div class="portlet box blue">
        <div class="portlet-title">
            <div class="caption"><i class="fa fa-reorder"></i>年级成绩分析</div>
            <div class="tools"><a href="javascript:;" class="collapse"></a><a href="javascript:;" class="remove"></a></div>
        </div>
        <div class="portlet-body">

            <div class="form-horizontal">
                <div class="col-md-4 margin-bottom-20">
                    <a href="" class="btn blue">重新计算</a>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="col-md-12">
                <div id="grade" style="width:100%;height:300px;"></div>
            </div>

            <div class="col-md-12">
                <div id="subject" style="width:100%;height:300px;"></div>
            </div>

            <div class="clearfix"></div>
            <div class="col-md-12">
                <div class="btn blue btn-block margin-bottom-10">各班成绩统计</div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-striped">
                        <tr>
                            <th width="80" rowspan=3>
                                <a href="" class="">一班成绩统计分析</a>
                            </th>
                            <th>科目</th>
                            <th>语文</th>
                            <th>数学</th>
                            <th>英语</th>
                        </tr>

                        <tr>
                            <td>最高分/最低分</td>
                            <td>60/90</td>
                            <td>53/100</td>
                            <td >42/100</td>
                        </tr>
                        <tr>
                            <td>平均分</td>
                            <td>60</td>
                            <td>53</td>
                            <td >42</td>
                        </tr>
                    </table>
                </div>
            </div>


            <div class="col-md-12 text-right">
                <button type="button" class="btn green">打印</button>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>
</block>

<block name="script">
    <script src="__JS__/echarts.common.min.js"></script>
    <script src="__STATIC__/scripts/app.js"></script>
    <script>
        jQuery(document).ready(function() {
            App.init();

            highlight_subnav('{:U('User/gradeInformation')}');
        });
    </script>
    <script>
        $(function() {
            var grade = echarts.init(document.getElementById('grade'));//年级
            var subject = echarts.init(document.getElementById('subject'));//科目

            // 年级图表配置项和数据
            var gradeoption = {
                color: ['#91c7ae','#c23531'],
                title: {
                    text: '年级成绩分析',
                    textStyle:{
                        fontSize:'16',
                        fontFamily:'Open Sans'
                    },
                    show:true,
                    textAlign:'left'
                },
                tooltip: {},
                legend: {
                    data:[
                        {name:'单科最高分'},
                        {name:'单科最低分'}
                    ],
                    right:'0'
                },
                xAxis: {
                    data: ["语文","数学","英语","自然","音乐","绘画","语文","数学","英语"]
                },
                yAxis: {},
                series: [
                    {
                        name: '单科最高分',
                        type: 'bar',
                        data: [25, 40, 40, 30, 20, 45,1,1,1]
                    },
                    {
                        name: '单科最低分',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20,1,1,1]
                    }
                ]
            };
            var subjectoption = {
                color: ['#91c7ae','#c23531','#3398DB'],
                title: {
                    text: '各科及格率',
                    textStyle:{fontSize:'16'},
                    show:true,
                    textAlign:'left'
                },
                tooltip: {},
                legend: {
                    data:[
                        {name:'及格人数'},
                        {name:'未及格人数'},
                        {name:'及格率'}
                    ],
                    right:'0'
                },
                xAxis: {
                    data: ["语文","数学","英语","自然","音乐","绘画","数学","英语","自然"]
                },
                yAxis: {},
                series: [
                    {
                        name: '及格人数',
                        type: 'bar',
                        data: [25, 40, 40, 30, 20, 45,68,92,45]
                    },
                    {
                        name: '未及格人数',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20,21,50,46]
                    },
                    {
                        name: '及格率',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20,50,45,78]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            grade.setOption(gradeoption);
            subject.setOption(subjectoption);
        });
    </script>
</block>